<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
    <link rel="stylesheet" type="text/css" href="circle_style.css"/>
</head>
<body id="body">
<div id="wrap" class="flex-wrap flex-vertical">

    <div id="main">
        <div class="fixed_top">
            <header id="header" class="header-box">
                <div class="left" onclick="back()"></div>
                <div class="center"></div>
                <div class="right"tapmode onclick="little_window()"></div>
            </header>
        </div>
        <div id='little-window' class="little-window" style="display:none">
            <ul>
                <li>分享</li>
                <li>举报</li>
                <li>匿名</li>
            </ul>
        </div>
        <div id = "ctitle" class="title" onclick="closelitwindow()">
        </div>
        <div id="tag"  class="tag" onclick="closelitwindow()">
        </div>
    </div>

    <div class="answer" onclick="closelitwindow()">
        <div class="replyer">
            <div class="replyer-left">
                <div id="showImage" class="replyer-imag">

                </div>
            </div>
            <div class="replyer-right">
                <div class="replyer-name">我是一只大橙子</div>
                <div class="replyer-note">UI问题优秀回答者</div>
            </div>
            <div id="follow_logo" class="follow"tapmode onclick="change_follow()">+关注</div>
        </div>

        <div id='answer_content' class="content-body">
            <p></p>
        </div>
        <div class="content-imag">
            <img src="../../image/eg_tulip.jpg" alt="">
        </div>
    </div>

    <div id="footer" class="fixed_bottom">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="open_comment(this)" class="flex-con active" ></li>
            <li tapmode="hover" onclick="approve(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="disapprove(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="collect( this )" class="flex-con" ></li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/dropload.min.js"></script>
<script type="text/javascript">

    var s_id;
    var as_id;
    var Strategy_data;
    var json_data = {};
    var is_liked;
    var is_collected;

    apiready = function () {
         s_id = api.pageParam.article_id;
        strategy_dict = {
            "app_version":"",
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "cookie":"fd2066e452fa3d60130e227412e51051",
            "article_id":s_id
        };
        like_dict={
            "app_version":"",
            "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            "cookie":"fd2066e452fa3d60130e227412e51051",
            "article_id":s_id,
            "is_like":1
        }
        dlike_dict={
            "app_version":"",
            "user_id":"",
            "cookie":"",
            "article_id":s_id,
            "is_like":1
        }
        json_data = {};



        var main = $api.byId('header');
        var title = $api.byId('ctitle');
        var tag = $api.byId('tag');
        var footer = $api.byId('footer');

        var header_H = $api.offset(header).h;
        var tag_H = $api.offset(tag).h;
        var title_H = $api.offset(title).h;
        var footer_H = $api.offset(footer).h;
        var footer_T = $api.offset(footer).t;
        GetStrategy(strategy_dict);

    }

    function GetStrategy(json) {
       $.ajax({
            type:'POST',
            url:"http://1.82.238.228:80/api/group/getSpecificArticle/",
            data:JSON.stringify(json),
            dataType:'json',
            async:false,
           success:function (ret) {
               Strategy_data = ret.data;
               alert(JSON.stringify(ret))
           },
           error:function (error) {
               alert(JSON.stringify(error))
           }
        });
        question_view();

    }


    function question_view() {


        document.getElementById('ctitle').innerHTML = 'hah';
        var cont = Strategy_data.text;
        var reg = new RegExp('------------------------------', "g")
        cont = cont.replace(reg, '<br>------------------------------------------------<br>')
        // document.getElementById('answer_content').childNodes[1].innerHTML = as_data.content;
        document.getElementById('answer_content').childNodes[1].innerHTML = cont;
        document.getElementById('footer').childNodes[1].childNodes[1].innerHTML = Strategy_data.comment_num;
        document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = Strategy_data.like_num;
        document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = Strategy_data.dislike_num;
        document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = Strategy_data.collect_num;
        var imgDiv = document.getElementById('showImage');
        if (Strategy_data.imglist == []) {
            imgDiv.innerHTML = imgDiv.innerHTML + "<img id=\"\" src=\"../../image/09-014416_603.jpg\" alt=\"\">"
        }
        else
        {   for (var x in Strategy_data.imglist) {
            imgDiv.innerHTML = imgDiv.innerHTML + "<img id=\"\" src=\" "+ x+ "\" alt=\"\">"
                }
        }
        if (is_liked == 0 ) { //点过赞 使点赞按键失效 激活点踩
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[3],'active')
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = 'true'
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = ''
        }
        else if (is_liked == 1)  { //
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[5],'active')
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = 'true'
        }
        else {
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = ''
        }

        if (is_collected == 1 ) { //收藏过
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[7],'active')
        }
    }

    function approve(tag) {
        if($api.hasCls(document.getElementById('footer').childNodes[1].childNodes[5],'active')) { //如果点踩高亮
            $api.removeCls(document.getElementById('footer').childNodes[1].childNodes[5], 'active');
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[3], 'active');

            document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) - 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = 'true'
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = ''
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/group/likeArticle/",

                data:JSON.stringify(like_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点赞成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点赞失败');
                }
            });
        }

        else {
            document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = 'true'
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = ''
            $api.addCls(tag, 'active');

            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/group/likeArticle/",

                data:JSON.stringify(like_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('点赞成功')
                    // view_tips(result)
                },
                error:function(){
                    console.log('点赞失败');
                }
            });
        };
    }

    function disapprove(tag) {
        if( $api.hasCls(document.getElementById('footer').childNodes[1].childNodes[3],'active') ) { //如果点赞高亮
            $api.removeCls(document.getElementById('footer').childNodes[1].childNodes[3], 'active');
            $api.addCls(document.getElementById('footer').childNodes[1].childNodes[5], 'active');

            document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) - 1 ;
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = 'true'
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/group/likeArticle/",

                data:JSON.stringify(dlike_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('disapprove')
                    // view_tips(result)
                },
                error:function(){
                    console.log('disapprove');
                }
            });
        }
        else {
            $api.addCls(tag, 'active');
            document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
            document.getElementById('footer').childNodes[1].childNodes[3].disabled = ''
            document.getElementById('footer').childNodes[1].childNodes[5].disabled = 'true'

            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/likeAnswer/",
                url: "http://1.82.238.228:80/api/group/likeArticle/",

                data:JSON.stringify(dlike_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('disapprove')
                    // view_tips(result)
                },
                error:function(){
                    console.log('disapprove');
                }
            });
        };
    }

    function collect(tag) {
        if( $api.hasCls(tag,'active') ) {  //已收藏
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/group/collectArticle/",
                data:JSON.stringify(strategy_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('取消收藏成功')
                },
                error:function(){
                    console.log('取消收藏失败');
                }
            });

            $api.removeCls(tag, 'active');
            document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) - 1 ;
        }
        else {
            $.ajax({
                type: 'POST',
                // url: "http://1.82.238.228:80/api/questionAnswer/dislikeAnswer/",
                url: "http://1.82.238.228:80/api/group/collectArticle/",

                data:JSON.stringify(strategy_dict),
                // crossDomain: true,
                dataType: 'json',
                async: false,
                success:function(result){
                    console.log('收藏成功')
                },
                error:function(){
                    console.log('收藏失败');
                }
            });
            $api.addCls(tag, 'active');
            document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) + 1 ;
        };

    }


    function open_comment(tag) {
        api.openFrame({
            name: 'comment',
            url: '../QandA/comment_box.html',
            rect: {
                x:0,
                y:0,
                w:api.winWidth,
                h:api.winHeight
            },
            pageParam: {
                question_id: s_id,
                answer_id: s_id,
                user_id: 'e3b3dc8d20b7052f5c0799f3aa4e9f3e',
                type:"circle"
            },
            animation: {
                type: 'movein',
                subType: "from_bottom",
                duration: 300
            },
            bgColor: 'rgba(0,0,0,0.6)',
            // bounces: false,
        });
    }

    function change_follow(tag) {
        var flag;
        if (document.getElementById('follow_logo').innerHTML == '+关注') {
            flag = 1; //表示关注动作
            document.getElementById('follow_logo').innerHTML = '取消关注';
        }
        else {
            flag = 0; //表示取消关注动作
            document.getElementById('follow_logo').innerHTML = '+关注';
        }

    }

    var litwindow = $api.dom('#little-window');

    function little_window() {
        if (litwindow.style.display == "none") {
            litwindow.style.display = '';
        }
        else {
            litwindow.style.display = 'none';
        }
    }
    function closelitwindow() {
        litwindow.style.display = 'none';
    }

    function back() {
        jsFun = 'location.reload();';
        api.execScript({
            name:'answer_list',
            script:jsFun
        });
        api.historyBack({
        }, function(ret, err) {
            if (!ret.status) {
                api.closeWin();
            }
        });
    }

</script>
